<template>
  <div class="listDetails">
    <div class="banana">
      <img src="@/assets/image/detailsBlue.png" alt="" />
    </div>
    <div class="titleTips">
      <div class="bread_nav">
        <span style="color:#999;">
          当前位置：
        </span>
        <span @click="goResetPath('home')" style="color:#666;">首页</span>
        <span style="color:#666;">
          &gt;
        </span>
        <span @click="goResetPath('upper')" style="color:#666;">
          {{ upperLevel }}
        </span>
        <span style="color:#666;">
          &gt;
        </span>
        <span style="color:#545D71;">
          {{ breadTitle }}
        </span>
      </div>
    </div>
    <div style="height:20px;width:100%;background:#F4F5F9;"></div>
    <div class="container">
      <div class="main">
        <h3>{{ listInfo.name }}</h3>
        <div class="tips">发布日期：{{ listInfo.create_date }}</div>
        <div class="mainBox" id="mainBox" v-html="listInfo.content"></div>
        <div class="filePdfBox">
          <div
            class="fileList clearfix"
            v-for="(file, index) in filePdfArr"
            :key="index"
          >
            <div class="pdfDownload fl" @click="downFile(file)">
              <i class="el-icon-download"></i>
            </div>
            <div class="pdfPreview fl" @click="previewFile(file)">
              {{ file.fileName }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fileBox" v-if="isFileShow" v-drag>
      <div class="fileBoxHeader clearfix">
        <div class="header_l fl">文件预览</div>
        <div class="header_r fr">
          <i class="el-icon-close" @click="closeFile"></i>
        </div>
      </div>
      <iframe
        id="previewPdf"
        :src="'../../../xmjg/pdf/web/viewer.html?file=' + filePath"
        height="616"
        width="100%"
      >
      </iframe>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileId: "",
      breadTitle: "通知内容",
      listInfo: {},
      type: "notice",
      memo1: "PORTAL_NOTICE",
      isFileShow: false,
      filePdfArr: [],
      filePath: "",
    };
  },
  created() {
    this.fileId = this.$route.query.fileId || "";
    this.type = this.$route.query.type || "";
    this.isShowFile = this.$route.query.isShowFile == 1 ? true : false;
    if (this.type == "notice") {
      this.breadTitle = "通知内容";
      this.upperLevel = "通知列表";
      this.memo1 = "PORTAL_NOTICE";
    } else {
      this.breadTitle = "政策内容";
      this.upperLevel = "政策列表";
      this.memo1 = "PORTAL_LAW";
    }
    this.getListInfo();
    this.getFilePdf();
  },
  methods: {
    getListInfo() {
      var that = this;
      var params = {
        fileId: that.fileId,
      };
      that.$client
        .post("/portal!getPoliciesOrNoticeContentData.do", params)
        .then(function(res) {
          console.log("列表结果详情：", res);
          if (res.code == 200) {
            that.listInfo = res.data[0] || {};
            if (that.listInfo.content) {
              that.listInfo.content = that.listInfo.content.replace(
                '<table border="0" width="100%" cellpadding="0" cellspacing="0">',
                '<table border="1" width="100%">'
              );
            }
          } else {
            // 请求失败
          }
        });
    },
    getFilePdf() {
      var that = this;
      var params = {
        memo2: that.fileId,
        memo1: that.memo1,
      };
      that.$client
        .post("/portal!findSysFileByMemo1AndMemo2.action", params)
        .then(function(res) {
          console.log("文件详情：", res);
          if (res) {
            that.filePdfArr = res || [];
            if (that.isShowFile == true) {
              console.log("进来了---------");
              that.isFileShow = true;
              var url =
                "/xmjg/portal!readAttachmentWorkToPdf_" +
                that.filePdfArr[0].sysFileId +
                ".action";
              that.filePath = url;
            }
          }
        });
    },
    goResetPath(type) {
      //返回首页
      if (type == "home") {
        this.$router.push({
          path: "/",
        });
      } else {
        var type = this.type;
        var code = this.type == "notice" ? "PORTAL_NOTICE" : "PORTAL_LAW";
        this.$router.push({
          path: "/details",
          query: {
            type: type,
            code: code,
          },
        });
      }
    },
    //文件下载
    downFile(file) {
      var url =
        "http://172.29.31.16:8000/xmjg/portal!readAttachmentWorkToPdf_" +
        file.sysFileId +
        ".action";
      window.open(url);
    },
    //文件预览
    previewFile(file) {
      this.isFileShow = true;
      var url =
        "/xmjg/portal!readAttachmentWorkToPdf_" + file.sysFileId + ".action";
      this.filePath = url;
    },
    closeFile() {
      this.isFileShow = false;
    },
  },
};
</script>
<style lang="less" scoped>
.listDetails {
  width: 100%;
  height: 100%;
  .banana {
    width: 100%;
    height: 185px;
    img {
      width: 100%;
    }
  }
  .titleTips {
    height: 36px;
    background: #ffffff;
    box-shadow: 0px 2px 9px 0px rgba(218, 218, 218, 0.5);
    .bread_nav {
      line-height: 36px;
      font-size: 14px;
      cursor: pointer;
      width: 1320px;
      margin: 0 auto;
    }
  }
  .container {
    width: 1320px;
    margin: 0 auto;
    .main {
      background: #fff;
      padding: 45px;
      h3 {
        font-size: 22px;
        text-align: center;
        font-weight: 800;
        margin-bottom: 32px;
      }
      .tips {
        padding: 16px 45px;
        font-size: 18px;
        margin-bottom: 40px;
        color: #999999;
        text-align: right;
        border-bottom: 1px solid #888;
      }
      .mainBox {
        font-size: 14px;
        line-height: 24px;
        color: #333;
      }
      .filePdfBox {
        margin-top: 16px;
        .fileList {
          display: inline-block;
          margin-right: 12px;
          line-height: 18px;
          /deep/.pdfDownload {
            margin-right: 2px;
            margin-top: 2px;
            cursor: pointer;
            .el-icon-download{
              color:#337ab7;
            }
            .el-icon-download:hover{
               color: #23527c;
            }
          }
          .pdfPreview {
            color: #337ab7;
            font-size: 14px;
            line-height: 16px;
            cursor: pointer;
          }
          .pdfPreview:hover{
            color: #23527c;
            border-bottom:1px solid #23527c;
          }
        }
      }
    }
  }
}
.fileBox {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fefefe;
  width: 80%;
  height: 75%;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid #dedede;
  border-radius: 5px;
  .fileBoxHeader {
    width: 100%;
    height: 48px;
    line-height: 48px;
    color: #666;
    font-size: 16px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 16px;
  }
  .fileBoxFooter {
    height: 48px;
    width: 100%;
    height: 48px;
    line-height: 48px;
    border-top: 1px solid #dedede;
    margin-top: 16px;
  }
}
</style>
